<template>
  <view>
    <u-navbar :title="title" :title-bold="true" title-color="#000"></u-navbar>
    <view class="u-p-20">
      <view class="flex mine-detail" @click="toInfo">
        <view class="title-card"> 三量信息 </view>
        <u-icon name="arrow-right"></u-icon>
      </view>
      <view class="reserves u-p-20">
        <view class="flex mine-detail">
          <text>地质储量（万吨） {{ threeQuan.geologyReserves }}</text>
          <text>可采储量（万吨） {{ threeQuan.mineReserves }}</text>
        </view>
        <view class="mine-grid">
          <text class="tag" style="background-color: #3d5fff">开拓</text>
          <u-grid :col="3">
            <u-grid-item>
              <view class="grid-text">
                <text class="primC">{{ threeQuan.openNum }}</text>
                <text class="commonColor"> 万吨</text>
              </view>
              <view class="grid-text">煤量</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text class="primC">{{ threeQuan.openPeriod }}</text>
                <text class="commonColor"> 年</text>
              </view>
              <view class="grid-text">可采期</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text :class="{ 'successC': threeQuan.openIsBalance,'errorC':!threeQuan.openIsBalance }">{{ threeQuan.openIsBalance?'是':'否' }}</text>
              </view>
              <view class="grid-text">是否平衡</view>
            </u-grid-item>
          </u-grid>
        </view>
        <view class="mine-grid">
          <text class="tag" style="background-color: #0acf97">准备</text>
          <u-grid :col="3">
            <u-grid-item>
              <view class="grid-text">
                <text  class="successC">{{ threeQuan.prepareNum }}</text>
                <text class="commonColor">万吨</text>
              </view>
              <view class="grid-text">煤量</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text  class="successC">{{ threeQuan.preparePeriod }}</text>
                <text class="commonColor"> 月</text>
              </view>
              <view class="grid-text">可采期</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text  :class="{ 'successC': threeQuan.prepareIsBalance,'errorC':!threeQuan.prepareIsBalance }">{{ threeQuan.prepareIsBalance?'是':'否' }}</text>
              </view>
              <view class="grid-text">是否平衡</view>
            </u-grid-item>
          </u-grid>
        </view>
        <view class="mine-grid">
          <text class="tag" style="background-color: #d29e08">回采</text>
          <u-grid :col="3">
            <u-grid-item>
              <view class="grid-text">
                <text class="infoC">{{ threeQuan.mineNum }}</text>
                <text class="commonColor"> 万吨</text>
              </view>
              <view class="grid-text">煤量</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text class="infoC">{{ threeQuan.minePeriod }}</text>
                <text class="commonColor"> 月</text>
              </view>
              <view class="grid-text">可采期</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text  :class="{ 'successC': threeQuan.mineIsBalance,'errorC':!threeQuan.mineIsBalance }">{{ threeQuan.mineIsBalance?'是':'否' }}</text>
              </view>
              <view class="grid-text">是否平衡</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <view class="flex mine-detail">
        <view class="title-card"> 计划信息 </view>
      </view>
      <view class="reserves u-p-10 plan" style="height: 186rpx;">
        <view class="flex mine-detail">
          <text>年度计划-{{ year }}</text>
        </view>
        <view class="mine-grid">
          <u-grid :col="3">
            <u-grid-item>
              <view class="grid-text">
                <text class="successC">{{yearData.drillingDepth}}</text>
                <text class="commonColor"> 米</text>
              </view>
              <view class="grid-text">掘进进尺</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text class="successC">{{yearData.rawCoal}}</text>
                <text class="commonColor"> 万吨</text>
              </view>
              <view class="grid-text">原煤</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text class="successC">{{yearData.electricityCoal}}</text>
                <text class="commonColor"> 万吨</text>
              </view>
              <view class="grid-text">电煤</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <view style="margin: 0 0 12rpx 20rpx">采掘接替计划</view>
      <u-tabs
        :list="list"
        :is-scroll="true"
        :current="current"
        bar-width="50"
        active-color="#5774ff"
        @change="change"
      >
      </u-tabs>
      <view>
        <view class="mine-grid">
          <u-grid :col="3">
            <u-grid-item>
              <view class="grid-text">
                <text class="primC">{{monthData.rawCoal}}</text>
                <text class="commonColor"> 吨</text>
              </view>
              <view class="grid-text">原煤生产计划回采</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text class="primC">{{monthData.drillingDepth}}</text>
                <text class="commonColor"> 米</text>
              </view>
              <view class="grid-text">掘进计划进尺</view>
            </u-grid-item>
            <u-grid-item>
              <view class="grid-text">
                <text class="primC">{{monthData.electricityCoal}}</text>
                <text class="commonColor"> 万吨</text>
              </view>
              <view class="grid-text">电煤计划供应</view>
            </u-grid-item>
          </u-grid>
        </view>
      </view>
      <view class="flex mine-detail" style="margin: 24rpx 0">
        <view class="title-card"> 采掘动态 </view>
      </view>
      <view class="mine-grid footer_grid" v-for="(item,index) in diggingDynamic" :key="index">
        <view class="flex mine-detail">
          <view>
            <text>{{ item.name }}</text>
            <u-tag :text="item.isNormal?'正常':'预警'" :type="item.isNormal?'success':'error'" size="12rpx" style="margin-left: 10rpx;"/>
          </view>
          <!-- <u-icon name="arrow-right"></u-icon> -->
        </view>
        <view class="flex box">
          <view
            class=""
            style="background-color: #ffedc7; width: 33%; height: 240rpx"
          >
            <view class="footer-info" style="color: #dbae30">地测预报</view>
            <view class="footer-text">
              <view v-if="item.geologicalDrillAlarmList.length>0">
                <view v-for="(item,index) in item.geologicalDrillAlarmList" :key="index">
                  {{ item }}
                </view>
              </view>
              <view v-else>
                <view v-if="item.geodeticPredictionNum&&item.geodeticPredictionNum>0">
                  <view class="infoC">{{item.geodeticPredictionNum}}米</view>
                <view>剩余可掘</view>
                </view>
              </view>
            </view>
          </view>
          <view style="background-color: #c9ffef; width: 33%; height: 240rpx" >
            <view class="footer-info" style="color: #33d9aa">瓦斯治理</view>
            <view class="footer-text">
              <view v-if="item.gasControlAlarmList.length>0">
                <view v-for="(item,index) in item.gasControlAlarmList" :key="index">
                  {{ item }}
                </view>
              </view>
              <view v-else>
                <view v-if="item.regionalOutburstPreventionNum&&item.regionalOutburstPreventionNum>0">
                <view class="successC">{{item.regionalOutburstPreventionNum}}米</view>
                <view>区域防突剩余可掘</view>
                </view>
                <view v-if="item.localOutburstPreventionNum&&item.localOutburstPreventionNum>0">
                <view class="successC">{{item.localOutburstPreventionNum}}米</view>
                <view>局部防突剩余可掘</view>
              </view>
              </view>
            </view>
          </view>
          <view style="background-color: #d2daff; width: 33%; height: 240rpx">
            <view class="footer-info" style="color: #4c6cff">探放水管理</view>
            <view class="footer-text">
              <view v-if="item.waterExplorationAndDrainageAlarmList.length>0">
                <view v-for="(item,index) in item.waterExplorationAndDrainageAlarmList" :key="index">
                  {{ item }}
                </view>
              </view>
              <view v-else>
                <view v-if="item.waterExplorationAndDrainageNum&&item.waterExplorationAndDrainageNum>0">
                <view class="successC">{{item.waterExplorationAndDrainageNum}}米</view>
                <view>剩余可掘</view>
              </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "",
      current: 0,
      list: [],
      searchData:{},
      monthData:{},//采掘接替数据
      yearData:{},//年度计划
      year:'',
      threeQuan:{},//三量信息
      diggingDynamic:[]//采掘动态
    };
  },
  onLoad(options) {
    let { customerId, customerName } = JSON.parse(decodeURIComponent(options.item));
    this.title = customerName;
    this.searchData.customerId =customerId
    for (var i = 1; i <= 12; i++) {
      this.list.push({ name: i + "月" });
    }
    this.current = new Date().getMonth();
    this.year =new Date().getFullYear()
    this.getList()
    this.getMonthData()
    this.getYearData()
    this.getDiggingDynamic()
  },
  methods: {
    change(index) {
      this.current = index;
      this.getMonthData()
    },
    async  getList(){
      let url ='/excavation/alarm1/getThreeQuantities'
      const { body,code } = await this.$get(`${url}?customerId=${this.searchData.customerId}`)
      if(body){
        this.threeQuan = body
      }
    },
   async getMonthData(){
      let url ='/excavation/alarm1/getDiggingReplacePlans'
      const { body } = await this.$get(`${url}?customerId=${this.searchData.customerId}&&month=${this.current+1}`)
      if(body){
        this.monthData = body
      }
    },
    async getYearData(){
      let url ='/excavation/alarm1/getAnnualPlans'
      const { body } = await this.$get(`${url}?customerId=${this.searchData.customerId}`)
      if(body){
        this.yearData = body
      }
    },
    async getDiggingDynamic(){
      let url ='/excavation/alarm1/getDiggingDynamicList'
      const { body } = await this.$get(`${url}?customerId=${this.searchData.customerId}`)
      if(body){
        this.diggingDynamic = body
      }
    },
    toInfo(){
        uni.navigateTo({
        url: './info?customerId='+this.searchData.customerId
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.mine-detail {
  justify-content: space-between;
}
.title-card {
  font-weight: bold;
  font-size: 30rpx;
  position: relative;
  margin-bottom: 0;
  padding-left: 22rpx;
}
.commonColor {
  color: #bababa;
}
.title-card::after {
  position: absolute;
  content: "";
  left: 0;
  top: -6rpx;
  height: 26rpx;
  width: 4rpx;
  transform: translateY(50%);
  background-color: #043470;
}
.reserves {
  width: 100%;
  height: 490rpx;
  background-color: #e9f1ff;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}
.mine-grid {
  position: relative;
  margin: 10rpx 0;
  .tag {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border-bottom-right-radius: 36rpx;
    color: #fff;
    font-size: 20rpx;
    width: 88rpx;
    text-align: center;
    border-top-left-radius: 12rpx;
  }
}
.reserves.plan {
  background-color: #ddfdf4 !important;
  height: 210rpx;
}
.footer_grid {
  background: #fff;
  padding-top: 8rpx;
  .mine-detail {
    padding: 8rpx 0;
    margin-left: 20rpx;
  }
}
// .footer-item{
//     border-top-left-radius: 12rpx;
//     // height: 240rpx;
//     /deep/ .u-grid-item-box{
//         padding: 0;
//         // height: 100rpx;
//     }
// }
.box {
  justify-content: space-between;
  text-align: center;
  padding: 0px 2px 6px 2px;
}
.footer-info {
  width: 100%;
  text-align: center;
}
.footer-text {
  background-color: #fff;
  width: 95%;
  height: 83%;
  font-size: 24rpx;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-text{
    font-size: 24rpx;
}
// /deep/ .u-tab-item {
//   margin: 0 10rpx;
// }
/deep/ .u-tag {
  font-size: 12px;
  width: 40px;
  text-align: center;
}
.infoC{
  color: #d7a924;
  font-weight: 700;
}
.primC{
  color: #506fff;
  font-weight: 700;
}
.errorC{
  color: #fb718c;
  font-weight: 700;
}
.successC{
  color: #33d7a8;
  font-weight: 700;
}
</style>